<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card
        shadow="never"
      >
        <el-form
          ref="searchOrder"
          label-width="100px"
          :model="searchOrder"
        >
          <el-col :span="8">
            <el-form-item
              label="订单编号："
              prop="id"
            >
              <el-input
                v-model="searchOrder.id"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="订单状态："
              style="margin-left: 20px;"
              prop="status"
            >
              <el-select
                v-model="searchOrder.status"
                placeholder="请选择订单状态"
              >
                <el-option
                  v-for="item in orderStatus"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="付费状态："
              style="margin-left: 20px"
              prop="paymentStatus"
            >
              <el-select
                v-model="searchOrder.paymentStatus"
                placeholder="请选择付费状态"
              >
                <el-option
                  v-for="item in paymentStatus"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="发件人姓名："
              prop="senderName"
            >
              <el-input
                v-model="searchOrder.senderName"
                placeholder="请输入发件人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="发件人电话："
              style="margin-left: 20px;"
              prop="senderPhone"
            >
              <el-input
                v-model="searchOrder.senderPhone"
                placeholder="请输入发件人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="发件人地址："
              style="margin-left: 20px"
            >
              <el-select
                v-model="searchOrder.senderProvinceId"
                style="display: inline-block;width: 30%;"
                @change="sendProvinceChange"
              >
                <el-option
                  v-for="item in city"
                  :key="item.areaId"
                  :value="+item.areaId"
                  :label="item.areaName"
                ></el-option>
              </el-select>
              <el-select
                v-model="searchOrder.senderCityId"
                style="display: inline-block;margin-left: 10px;width: 30%;"
                @change="sendCityChange"
              >
                <el-option
                  v-for="item in sendInProvince"
                  :key="item.areaId"
                  :value="+item.areaId"
                  :label="item.areaName"
                ></el-option>
              </el-select>
              <el-select
                v-model="searchOrder.senderCountyId"
                style="display: inline-block;margin-left: 10px;width: 30%;"
              >
                <el-option
                  v-for="item in sendAreas"
                  :key="item.areaId"
                  :value="+item.areaId"
                  :label="item.areaName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="收件人姓名："
              prop="receiverName"
            >
              <el-input
                v-model="searchOrder.receiverName"
                placeholder="请输入收件人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="收件人电话："
              style="margin-left: 20px;"
              prop="receiverPhone"
            >
              <el-input
                v-model="searchOrder.receiverPhone"
                placeholder="请输入收件人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="收件人地址："
              style="margin-left: 20px"
            >
              <el-select
                v-model="searchOrder.receiverProvinceId"
                style="display: inline-block;width: 30%;"
                @change="receiverProvinceChange"
              >
                <el-option
                  v-for="item in city"
                  :key="item.areaId"
                  :value="item.areaId"
                  :label="item.areaName"
                ></el-option>
              </el-select>
              <el-select
                v-model="searchOrder.receiverCityId"
                style="display: inline-block;margin-left: 10px;width: 30%;"
                @change="receiverCityChange"
              >
                <el-option
                  v-for="item in receiverInProvince"
                  :key="item.areaId"
                  :value="item.areaId"
                  :label="item.areaName"
                ></el-option>
              </el-select>
              <el-select
                v-model="searchOrder.receiverCountyId"
                style="display: inline-block;margin-left: 10px;width: 30%;"
              >
                <el-option
                  v-for="item in receiverAreas"
                  :key="item.areaId"
                  :value="item.areaId"
                  :label="item.areaName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <el-button
          type="warning"
          @click="search"
        >搜索</el-button>
        <el-button @click="resetSearchOrder">重置</el-button>
      </el-card>
      <el-card
        shadow="never"
        style="margin-top: 30px;"
      >
        <el-table
          :data="orderList"
          stripe
          style="width: 100%;"
          :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
        >
          <el-table-column
            label="序号"
            width="60"
            type="index"
          ></el-table-column>
          <el-table-column
            label="订单编号"
            min-width="160"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="运单编号"
            min-width="130"
            prop="transportOrder.id"
          ></el-table-column>
          <el-table-column
            label="下单时间"
            min-width="160"
            prop="createTime"
          ></el-table-column>
          <el-table-column
            label="订单状态"
            min-width="90"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == ' 23000'">待取件</span>
              <span v-else-if="scope.row.status == '23001'">已取件</span>
              <span v-else-if="scope.row.status == '23002'">网点自寄</span>
              <span v-else-if="scope.row.status == '23003'">网点入库</span>
              <span v-else-if="scope.row.status == '23004'">待装车</span>
              <span v-else-if="scope.row.status == '23005'">运输中</span>
              <span v-else-if="scope.row.status == '23006'">网点出库</span>
              <span v-else-if="scope.row.status == '23007'">待派送</span>
              <span v-else-if="scope.row.status == '23008'">派送中</span>
              <span v-else-if="scope.row.status == '23009'">已签收</span>
              <span v-else-if="scope.row.status == '23010'">拒收</span>
              <span v-else>已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            label="发件人姓名"
            min-width="100"
            prop="senderName"
          ></el-table-column>
          <el-table-column
            label="发件人电话"
            min-width="120"
            prop="senderPhone"
          ></el-table-column>
          <el-table-column
            label="发件人地址"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.senderProvince === null
                  ? ''
                  : scope.row.senderProvince.name
              }}</span>
              <span>{{
                scope.row.senderCity === null ? '' : scope.row.senderCity.name
              }}</span>
              <span>{{
                scope.row.senderCounty === null
                  ? ''
                  : scope.row.senderCounty.name
              }}</span>
              <span>{{ scope.row.senderAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="收件人姓名"
            min-width="100"
            prop="receiverName"
          ></el-table-column>
          <el-table-column
            label="收件人电话"
            min-width="120"
            prop="receiverPhone"
          ></el-table-column>
          <el-table-column
            label="收件人地址"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.receiverProvince === null
                  ? ''
                  : scope.row.receiverProvince.name
              }}</span>
              <span>{{
                scope.row.receiverCity === null
                  ? ''
                  : scope.row.receiverCity.name
              }}</span>
              <span>{{
                scope.row.receiverCounty === null
                  ? ''
                  : scope.row.receiverCounty.name
              }}</span>
              <span>{{ scope.row.receiverAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="取件类型"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.pickupType == 1">网点自寄</span>
              <span v-else>上门取件</span>
            </template>
          </el-table-column>
          <el-table-column
            label="付费类型"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.paymentMethod == 1">预结</span>
              <span v-else>到付</span>
            </template>
          </el-table-column>
          <el-table-column
            label="付费状态"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.paymentStatus == 1">未付</span>
              <span v-else>已付</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="85"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                v-if="
                  scope.row.status == '23002' && scope.row.pickupType == 1
                "
                type="primary"
                :underline="false"
                @click="handleOrderDetail(scope.row.id, scope.row.pickupType)"
              >编辑详情</el-link>
              <el-link
                v-else
                type="primary"
                :underline="false"
                @click="
                  handleOrderDetail(
                    scope.row.id,
                    scope.row.status,
                    scope.row.pickupType,
                    scope.row.transportOrder === null
                      ? ''
                      : scope.row.transportOrder.id
                  )
                "
              >查看详情</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="searchOrder.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="searchOrder.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          style="margin-top: 20px;text-align: center;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import city from '@/api/city.json'
import { orderList } from '@/api/order'
export default {
  data () {
    return {
      orderStatus: [
        {
          label: '待取件',
          value: 23000
        },
        {
          label: '已取件',
          value: 23001
        },
        {
          label: '网点自寄',
          value: 23002
        },
        {
          label: '网点入库',
          value: 23003
        },
        {
          label: '待装车',
          value: 23004
        },
        {
          label: '运输中',
          value: 23005
        },
        {
          label: '网点出库',
          value: 23006
        },
        {
          label: '待派送',
          value: 23007
        },
        {
          label: '派送中',
          value: 23008
        },
        {
          label: '已签收',
          value: 23009
        },
        {
          label: '拒收',
          value: 23010
        },
        {
          label: '已取消',
          value: 23011
        }
      ],
      paymentStatus: [
        {
          label: '未付',
          value: 1
        },
        {
          label: '已付',
          value: 2
        }
      ],
      city,
      sendInProvince: [],
      sendAreas: [],
      receiverInProvince: [],
      receiverAreas: [],
      searchOrder: {
        id: '',
        status: '',
        paymentStatus: '',
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        page: 1,
        pageSize: 10
      },
      orderList: [],
      counts: 0
    }
  },
  mounted () {
    this.getOrderList()
  },
  methods: {
    sendProvinceChange(val) {
      this.sendAreas = []
      this.searchOrder.senderCityId = ''
      this.searchOrder.senderCountyId = ''
      const arr = this.city.filter(item => {
        return item.areaId === val
      })
      this.sendInProvince = arr[0].cities
    },
    sendCityChange(val) {
      this.searchOrder.senderCountyId = ''
      const arr = this.sendInProvince.filter(item => {
        return item.areaId === val
      })
      this.sendAreas = arr[0].counties
    },
    receiverProvinceChange(val) {
      this.receiverAreas = []
      this.searchOrder.receiverCityId = ''
      this.searchOrder.receiverCountyId = ''
      const arr = this.city.filter(item => {
        return item.areaId === val
      })
      this.receiverInProvince = arr[0].cities
    },
    receiverCityChange(val) {
      this.searchOrder.receiverCountyId = ''
      const arr = this.receiverInProvince.filter(item => {
        return item.areaId === val
      })
      this.receiverAreas = arr[0].counties
    },
    resetSearchOrder() {
      this.$refs.searchOrder.resetFields()
      this.searchOrder.senderProvinceId = ''
      this.searchOrder.senderCityId = ''
      this.searchOrder.senderCountyId = ''
      this.searchOrder.receiverProvinceId = ''
      this.searchOrder.receiverCityId = ''
      this.searchOrder.receiverCountyId = ''
      this.getOrderList()
    },
    async getOrderList() {
      const res = await orderList(this.searchOrder)
      this.orderList = res.data.items
      this.counts = +res.data.counts
    },
    handleOrderDetail(id, status, pickupType, transportOrderId) {
      // eslint-disable-next-line object-curly-spacing
      this.$router.push({
        path: '/business/edit-order',
        query: {
          orderId: id,
          status: status,
          pickUpType: pickupType,
          transportOrderId
        }
      })
    },
    handleSizeChange(val) {
      this.searchOrder.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.searchOrder.page = val
      this.getOrderList()
    },
    search() {
      this.getOrderList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
